<!--
 * @Author: LALA
 * @Date: 2021-12-30 09:48:15
 * @LastEditTime: 2022-01-06 16:52:25
 * @LastEditors: LALA
 * @Description: 
 * @FilePath: \am-app\src\views\manager\Complete.vue
 * 别乱动！
-->
<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-20 16:47:29
 * @LastEditors: LALA
 * @LastEditTime: 2022-01-06 10:08:56
-->
<template>
  <div class="workorder">
     <van-nav-bar
      title="完成工单"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="van-cell van-field">
        <div class="van-field__label">
          <span>工单类型</span>
        </div>
          <div class="right">
           <span> {{ order.type}}</span>
          </div>  
      </div>
     <div class="van-cell van-field">
        <div class="van-field__label">
          <span>工单状态</span>
        </div>
          <div class="right">
           <span> {{ order.status}}</span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>项目名称</span>
        </div>
          <div class="right">
           <span>{{order.engineer_name }} </span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>设备名称</span>
        </div>
          <div class="right">
           <span>{{ order.device_name }}</span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>申报原因</span>
        </div>
          <div class="right">
           <span> {{ order.bill_why}}</span>
          </div>  
      </div>
      
      <van-cell title="申报图片"/> 
      <div v-for="(item, index) in order.begin_photos" :key=" index">
        <!-- {{ item }} -->
        <img :src="item" alt="丢失" />
      </div>
<div v-if="order.status == '已完成'">
  <van-cell  title="完成图片"/> 

      <div v-for="(item, index) in order.end_photos" :key="index">
        <!-- {{ item }} -->
        <img :src="item" alt="丢失" />
      </div>
      </div>
      <div>
     <van-cell v-if="order.status == '进行中'" title="处理现场"/> 
     </div>
    <!-- 图片上传 -->
    <div style="margin-bottom:2em" v-if="order.status == '进行中'">
      <van-uploader 
      multiple 
      :fileList="imgList"
      :max-count="3" 
      result-type="file"
      :after-read="afterRead" />
    </div>

    <van-button  type="primary" v-if="order.status == '进行中'" block @click="submitHandler">完成工单</van-button>
    <!-- <van-button disabled type="primary" block v-else>完成工单</van-button> -->


  </div>
</template>
<script>
import {get} from '../../utils/request'
import axios from 'axios'
import {Toast} from 'vant'

export default {
  data(){
    return {
      order:{},
      imgList:[],
      order_id: null,
  
    }
  },
  methods: {
  // 根据id查询工单详情
    findWorkerOrderById(id) {
      get("/workorder/findById", { id }).then((res) => {
        this.order = res.data.order[0];
      });
    },
    submitHandler(){
      let imgList = this.imgList;
      if(imgList.length < 3 ){
        Toast.fail('必须上传3张图片')
        return false;
      }
      let url = "/workorder/finishOrder"
      let params = {
        id:this.order.id,
        photo1:imgList[0].url,
        photo2:imgList[1].url,
        photo3:imgList[2].url,
        finish_time:new Date().getTime()
      }
      get(url,params).then(resp => {
        Toast.success(resp.message);
        this.$router.go(-1)
      })
     

    },
    // 上传图片
    afterRead(file){
      console.log(file);
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios.post(url, params, {
        headers: { "Content-Type": "multipart/form-data" }
      })
      .then(response => {
        file.status = "success";
        let url = 'http://121.199.29.84:8888/group1/'+response.data.data.id;
        this.imgList.push({url});
      })
      .catch(error => {
        file.status = "failed";
        file.message = "上传失败";
        Toast("图片上传失败:" + error + " 请返回重新上传");
      });
    }
  },
  mounted() {
    this.order = this.$route.query;
    this.order = this.$route.query.item;
    // 执行根据id查询工单数据的方法
    this.findWorkerOrderById(this.order_id);
  },
}
</script>
<style scoped>
.workorder {
  font-size: 12px;
  color: #666;
  padding-bottom: 50px;
  background-color: #f4f4f4
}
img{
   width:100px;
   height: 100px;
    float: left;
    margin-left: 18px;

 
}
</style>
<style >
.van-uploader__wrapper {
  width:100%
}

.van-uploader__wrapper > div {
  flex:1
}

.van-uploader__wrapper > div .van-uploader__preview-image {
  width:100%
}


</style>